<template>
	<view>
		<view class="logo">
			<view class="img">
				<image src="../../../static/login-logo.png"></image>
			</view>
		</view>
		<!-- 账号密码输入框 -->
		<!-- 登录tab -->
		<view class="login-tab">
			<view :class="{active:loginType===0}" @click="clickTab(0)">验证码登录</view>
			<view :class="{active:loginType===1}" @click="clickTab(1)">密码登录</view>
		</view>

		<view class="oauth">
			<view class="text-tips">
				<view>首次登录将会自动为您注册</view>
				<view style="padding-right: 4rpx;">
					<!-- @click="tongyixieyi"  value="cb" :checked="tongyi" -->
					<checkbox id="checkbox" value="cb" :checked="tongyi" style="transform:scale(0.8)"
						@click="tongyixieyi" />
					<label for='checkbox' @click="tongyixieyi">登录即表示您同意</label><text style="color: #007AFF;"
						@click="fuwutiaokuan">《采招网服务条款》</text>及<text style="color:#007AFF;"
						@click="yinsizhengce">《隐私政策》</text>
				</view>
			</view>
		</view>
		<!-- 验证码登录 -->
		<login-yzm ref="loginYzm" :tongyi="tongyi" :fromurl='fromurl' :tiaozhuantype="tiaozhuantype" :name.sync="name"
			v-if="loginType===0" />
		<!-- 密码登录 -->
		<login-account ref="loginAccount" :tongyi="tongyi" :fromurl='fromurl' :tiaozhuantype="tiaozhuantype"
			:name.sync="name" v-else />
		<!-- 采招网服务条款 -->
		<!-- <uni-popup ref="showtip" :mask-click="false" @change="change">
			<view class="fuwutiaokuan">
				<view class="fwtk-title">中国采招网服务条款</view>
				<view class="fwtk-content">
					<view class="fwtk-Ftitle">1. 特别提示</view>
					<view class="fwtk-text">1.1 中国采招网同意按照本协议的规定及其不定时发布的操作规则提供基于互联网的相关服务（以下称"网络服务
						"）。为获得网络服务，服务使用人（以下称"用户"）应当同意本协议的全部条款并按照页面上的提示完成全部的注册程序。用户在进行注册程序过程中点击"接受服务条款"即表示用户完全接受本协议项下的全部条款。
					</view>
					<view class="fwtk-Ftitle">2. 服务内容</view>
					<view class="fwtk-text">2.1 中国采招网网络服务的具体内容由中国采招网根据实际情况提供，并保留随时变更、中断或终止部分或全部网络服务的权利。</view>
					<view class="fwtk-text">2.2
						中国采招网在提供网络服务时，会对部分网络服务的用户收取一定的费用。在此情况下，中国采招网会在相关页面上做明确的提示。如用户拒绝支付该项费用，则不能使用相关的网络服务。</view>
				</view>
				<button class="fwtk-btn" @click="cancel('tip')">同意协议</button>
			</view>
		</uni-popup> -->

	</view>
</template>

<script>
	import LoginAccount from './LoginAccount.vue'
	import LoginYzm from './LoginYzm.vue'
	// let fromurl = '';
	// let tiaozhuantype = '';
	export default {
		components: {
			LoginAccount,
			LoginYzm
		},
		data() {
			return {
				name: '',
				loginType: 0,
				type: '',
				// seconds: 60,
				// codeBtn: {
				// 	text: '获取验证码',
				// 	waitingCode: false,
				// 	count: this.seconds,
				// 	vtoken: ''
				// },
				// vcodeNumber: '',
				// phoneNumber: '',
				// password: '',
				// serverTel: this.baseConfig.serverTel,
				fromurl: '',
				tiaozhuantype: '',
				// ispreLogin: false, //预登陆验证 true：成功 
				tongyi: false
			}
		},
		onInit(options){
			if (options && options.fromurl != undefined && options.fromurl != '' && options.type != undefined && options
				.type !=
				'') {
				this.fromurl = decodeURIComponent(options.fromurl);
				this.tiaozhuantype = options.type
			}
			console.log(this.fromurl)
			this.loginReady();
		},
		onShow() {
			// this.getSendCodeVToken();
			const istongyi = uni.getStorageSync('AgreeService');
			if (istongyi) {
				this.tongyi = true;
			}
		},
		onLoad(options) {
			// fromurl = '';
			// tiaozhuantype = '';
			// if (options && options.fromurl != undefined && options.fromurl != '' && options.type != undefined && options
			// 	.type !=
			// 	'') {
			// 	this.fromurl = decodeURIComponent(options.fromurl);
			// 	this.tiaozhuantype = options.type
			// }
			// console.log(this.fromurl)
			// this.loginReady();
		},
		onNavigationBarButtonTap(e) {
			uni.switchTab({
				url: "/pages/index/index"
			})
		},
		// computed: {
		// 	disableCodeBtn: function() {
		// 		return this.codeBtn.waitingCode;
		// 	}
		// },
		methods: {
			clickTab(val) {
				this.loginType = val
			},
			// back() {
			// 	console.log('back()');
			// 	uni.switchTab({
			// 		url: '/pages/index/index'
			// 	});
			// },
			fuwutiaokuan() {
				uni.navigateTo({
					url: "/pages/index/webview/common-webview?weburl=https://www.bidcenter.com.cn/help/fwtk.shtml"
				})
			},
			yinsizhengce() {
				uni.navigateTo({
					url: "/pages/index/webview/common-webview?weburl=https://www.bidcenter.com.cn/help/yszc.shtml"
				})
			},
			gotourl(type, url) {
				//type: tab  nav
				if (type == 'tab') {
					uni.switchTab({
						url: url
					})
				} else if (type == 'nav') {
					uni.navigateTo({
						url: url
					})
				}
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				//console.log('是否打开:' + e.show)
			},
			Login(number) { //一键登录
				//验证手机号码
				if (!(/^1\d{10}$/.test(number))) {
					uni.showToast({
						title: '获取到的手机号码格式不正确',
						icon: "none"
					});
					return false;
				}
				//访问接口获取验证码
				let data = this.initNewData();
				//位置类别
				data.type = 2;
				data.location = 5116;
				data.mobile = number;
				data.vcode = this.vcodeNumber;
				uni.request({
					url: this.baseConfig.serverURL + 'User/login/LoginHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							if (!res.data.ret) {
								// uni.showToast({
								// 	title: res.data.msg,
								// 	icon: "none"
								// });
								uni.showModal({
									content: res.data.msg,
									showCancel: false,
									success: function() {
										uni.closeAuthView();
									}
								});
							} else {
								this.currUser = res.data.other2;
								uni.setStorageSync("curruser", this.currUser)
								// 更新登录状态
								this.checkLogin();
								
								if (this.fromurl != '' && this.tiaozhuantype != '') {
									if (this.fromurl.indexOf('common-webview') > 0) {
										uni.navigateBack({
											delta: 1
										});
									} else {}
								} else {
									uni.navigateBack({
										delta: 1
									});
								}
								uni.closeAuthView();
							}
						} else {
							// uni.showToast({
							// 	title: '登录失败,请尝试其他方式',
							// 	icon: "none"
							// });
							uni.showModal({
								content: "登录失败,请尝试其他方式!",
								showCancel: false,
								success: function() {
									uni
										.closeAuthView();
								}
							});
						}
						uni.hideLoading();
						uni.hideNavigationBarLoading();
					},
					fail: (res) => {
						uni.hideLoading();
						uni.hideNavigationBarLoading();
						uni.showToast({
							title: '登录失败,请尝试其他方式！',
							icon: "none"
						});
					}
				})
			},
			loginReady() {
				let that = this;
				return new Promise(() => {
					uni.getProvider({
						service: 'oauth',
						success: function(res) {
							// console.log('uni.getProvider一键登录服务供应商接口调通',res)
							for (var i = 0; i < res.provider.length; i++) {
								if (res.provider[i] == 'univerify') {
									uni.login({
										provider: 'univerify',
										univerifyStyle: { // 自定义登录框样式

											"fullScreen": "true", // 是否全屏显示，默认值： "false"
											"backgroundColor": "#ffffff", // 授权页面背景颜色，默认值：#ffffff
											"icon": {
												"path": "static/img/login/czw_logo.png" // 自定义显示在授权框中的logo，仅支持本地图片 默认显示App logo   
											},
											"phoneNum": {
												"color": "#202020" // 手机号文字颜色 默认值：#202020  
											},
											"slogan": {
												"color": "#BBBBBB" //  slogan 字体颜色 默认值：#BBBBBB  
											},
											"authButton": {
												"normalColor": "#fc925e", // 授权按钮正常状态背景颜色 默认值：#3479f5  
												"highlightColor": "#2861c5", // 授权按钮按下状态背景颜色 默认值：#2861c5（仅ios支持）  
												"disabledColor": "#73aaf5", // 授权按钮不可点击时背景颜色 默认值：#73aaf5（仅ios支持）  
												"textColor": "#ffffff", // 授权按钮文字颜色 默认值：#ffffff  
												"title": "本机号码一键登录", // 授权按钮文案 默认值：“本机号码一键登录”  
												"borderRadius": "24px" // 授权按钮圆角 默认值："24px" （按钮高度的一半）
											},
											"otherLoginButton": {
												"visible": "true", // 是否显示其他登录按钮，默认值：true  
												"normalColor": "", // 其他登录按钮正常状态背景颜色 默认值：透明 
												"highlightColor": "", // 其他登录按钮按下状态背景颜色 默认值：透明 
												"textColor": "#656565", // 其他登录按钮文字颜色 默认值：#656565  
												"title": "其他登录方式", // 其他登录方式按钮文字 默认值：“其他登录方式”  
												"borderColor": "", //边框颜色 默认值：透明（仅iOS支持）  
												"borderRadius": "0px" // 其他登录按钮圆角 默认值："24px" （按钮高度的一半）
											},
											"privacyTerms": {
												"defaultCheckBoxState": "false", // 条款勾选框初始状态 默认值： true   
												"textColor": "#BBBBBB", // 文字颜色 默认值：#BBBBBB  
												"termsColor": "#5496E3", //  协议文字颜色 默认值： #5496E3  
												"prefix": "我已阅读并同意", // 条款前的文案 默认值：“我已阅读并同意”  
												"suffix": "并使用本机号码登录", // 条款后的文案 默认值：“并使用本机号码登录”  
												"privacyItems": [
													// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效  
													{
														"url": "https://www.bidcenter.com.cn/help/yszc.shtml", // 点击跳转的协议详情页面  
														"title": "《采招网隐私政策》" // 协议名称  
													}
												]
											}
										},
										success(res) { // 登录成功
											// {openid:'登录授权唯一标识',access_token:'接口返回的 token'}											
											let authrel = res.authResult;
											// 在得到access_token后，通过callfunction调用云函数
											// console.log('uni.logi ok', res)
											uniCloud.callFunction({
												name: 'getphonenum', // 你的云函数名称
												data: {
													'access_token': authrel
														.access_token, // 客户端一键登录接口返回的access_token
													'openid': authrel
														.openid // 客户端一键登录接口返回的openid
												}
											}).then(res => {
												//console.log(res); //content
												// 登录成功，可以关闭一键登录授权界面了
												console.log('一键登录云函数调用成功', res)
												if (res.result.content.success ==
													true) {
													that.Login(res.result.content
														.phoneNumber)
												} else {
													uni.showModal({
														content: "获取真实号码失败,请尝试其他方式登录",
														showCancel: false,
														success: function() {
															uni
																.closeAuthView();
														}
													});
												}
											}).catch(err => {
												console.log('一键登录云函数调用失败', err)
												// 处理错误
												uni.showModal({
													content: "未获取到真实号码,登录失败,请尝试其他方式!",
													showCancel: false,
													success: function() {
														uni
															.closeAuthView();
													}
												});
											})
										},
										fail(res) { // 登录失败
											if (res.errCode == 30003) { //点击了关闭按钮
												console.log(this.fromurl)
												console.log(this.tiaozhuantype)
												if (this.fromurl ==
													'/pages/user/custom/custom') {
													that.gotourl('tab', '/pages/index/index');
												} else {
													uni.navigateBack({
														delta: 1
													});
												}
											}
											uni.closeAuthView();
										}
									})
								}
							}
						}
					});
				})
			},
			tongyixieyi() {
				this.tongyi = !this.tongyi;
				this.$nextTick(()=>{
					// 存储记录 下次登录不用再次勾选服务条款
					if(this.tongyi){
						uni.setStorage({
							key: 'AgreeService',
							data: true
						});
					}
				})
				
				//console.log(this.tongyi);
			}
		},
		onBackPress() {
			if (this.fromurl == '/pages/user/custom/custom') {
				this.gotourl('tab', '/pages/index/index');
				return true;
			} else if (this.fromurl == '/pages/user/huiyuan/payment') {
				// uni.navigateBack({
				// 	delta: 2
				// });
				// return true;
			}
		}
	}
</script>

<style lang="scss">
	@import "../../../static/css/login.scss";

	// .form {

	// 	.res-btn {
	// 		color: #375fe1;
	// 		text-decoration: underline;
	// 	}


	// 	.huo-box {
	// 		text-align: center;
	// 		color: #C0C0C0;
	// 		margin: 20rpx 0;
	// 		font-size: 30rpx;
	// 	}

	// 	.btn2 {
	// 		background-color: #fff;
	// 		border: 1px solid #375fe1;
	// 		color: #375fe1;
	// 		box-sizing: border-box;
	// 	}
	// }

	.oauth {
		// @media all and (max-height: 150vw) {
		// 	display: none;
		// }

		position: absolute;
		bottom: 50rpx;
		width: 100%;

		.text {
			width: 100%;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #cccbcb;
			font-size: 28upx;
		}

		.list {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20upx 0;

			.icon {
				font-size: 80upx;
				margin: 0 30upx;
			}
		}
	}

	.weixin {
		image {
			width: 86rpx;
			height: 90rpx;
		}
	}

	.text-tips {
		margin-top: 30rpx;
		text-align: center;
		font-size: 28rpx;
		color: #cccbcb;
		line-height: 40rpx;
	}

	// .yzm-btn {
	// 	font-size: 28rpx;
	// 	color: #ff4a32;
	// 	border: 1px solid #ff4a32;
	// 	border-radius: 3px;
	// 	padding: 14rpx 0px;
	// 	width: 40%;
	// 	text-align: center;

	// 	&:after {
	// 		border: none;
	// 	}

	// 	&.active {
	// 		background-color: #ff4a32;
	// 		color: #fff;
	// 	}
	// }

	// .password {
	// 	display: flex;
	// 	flex-direction: row;
	// 	justify-content: space-between;
	// 	align-items: center;

	// 	button {
	// 		font-size: 28rpx;
	// 		// color: #ff4a32 !important;
	// 		color:#2F6DFE !important;
	// 		// border: 1px solid #ff4a32;
	// 		border-radius: 3px;
	// 		padding: 14rpx 0px;
	// 		// width: 40%;
	// 		text-align: center;
	// 		line-height: 36rpx;
	// 		background-color: #FFFFFF !important;

	// 		&:after {
	// 			border: none
	// 		}

	// 		&.active {
	// 			background-color: #ff4a32;
	// 			color: #fff;
	// 		}
	// 	}
	// }

	// .popup-yzm {
	// 	background-color: #fff;
	// 	width: 90%;
	// 	border-radius: 20rpx;
	// 	position: relative;
	// 	margin-left: 5%;

	// 	.yzm-close {
	// 		position: absolute;
	// 		right: 20rpx;
	// 		top: 20rpx;

	// 		image {
	// 			width: 50rpx;
	// 			height: 49rpx;
	// 		}
	// 	}

	// 	.yzm-title {
	// 		padding-top: 35rpx;
	// 		text-align: center;
	// 		font-size: 35rpx;
	// 	}

	// 	.yzm-text {
	// 		font-size: 28rpx;
	// 		color: #666666;
	// 		line-height: 40rpx;
	// 		padding: 20rpx 64rpx;

	// 		view {
	// 			margin-bottom: 20rpx;
	// 		}

	// 		// .yunyingshang {
	// 		// 	text-decoration: underline;
	// 		// 	color: #2660CD;
	// 		// }
	// 	}
	// }

	.fuwutiaokuan {
		width: 90%;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		margin-left: 5%;
		padding-top: 30rpx;
		overflow: hidden;

		.fwtk-title {
			text-align: center;
			font-size: 35rpx;
		}

		.fwtk-content {
			padding: 0 30rpx 30rpx;

			// height: 200rpx;
			// overflow-x: hidden;
			// overflow-y: scroll;
			//  -webkit-overflow-scrolling: touch;
			.fwtk-Ftitle {
				padding-top: 30rpx;
				font-size: 30rpx;
			}

			.fwtk-text {
				font-size: 26rpx;
				color: #666666;
				line-height: 32rpx;
				padding-top: 20rpx;
			}
		}

		.fwtk-btn {
			color: #fff;
			background-color: #2F69E0;
			border-radius: 0;
			font-size: 34rpx;
		}
	}
</style>